import React, { Component } from 'react'
import { Form, Input, Button, Upload, message } from 'antd';
/* 引入上传图标组件 */
import { UploadOutlined } from '@ant-design/icons';
/* 引入接口 */
import { fetchArtDetail, updateArt } from '@/api'
/* 引入富文本编辑器 */
import E from 'wangeditor'
/* 导出ArtEdit类组件 */
export default class ArtEdit extends Component {
  constructor(){
    super();
    this.state = {
      /* 图片地址 */
      thumb: '',
      editor: null,
      art: {} // 商品详情
    }
  }
  render() {
    const layout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 20,
      },
    };
    const tailLayout = {
      wrapperCol: {
        offset: 4,
        span: 16,
      },
    }
    const props = {
      name: 'file',
      /* 提交的接口地址 */
      action: '/api/upload',
      headers: {
        authorization: 'authorization-text',
      },
      /* 编辑时调用的方法 */
      onChange: (info) =>{
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        /* 文件上传状态为done */
        if (info.file.status === 'done') {
          console.log(info.file.response.data.url);
          /* 设置state */
          this.setState({
            /* 将服务器返回的图片地址赋值给thumb */
            thumb: info.file.response.data.url
          })
          /* 文件上传状态 error */
        } else if (info.file.status === 'error') {
          /* 错误的提示信息 */
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };
  
    return (
      <div style={{maxWidth: 800}}>
        {
          this.state.art.id
          &&
          <Form
          {...layout}
          name="basic"
          initialValues={ this.state.art }
          onFinish={this.submitForm}
        >
          <Form.Item
            label="作者"
            name="author"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="标题"
            name="title"
            /* 规则验证 */
            rules={[
              {
                required: true,
                message: '必须输入标题!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="描述"
            name="desc"
          >
            <Input.TextArea  />
          </Form.Item>
          <Form.Item
            label="上传封面"
          >
            {/* props上的属性添加到upload组件上 */}
             <Upload {...props}>
               {/* 点击按钮 */}
              <Button icon={<UploadOutlined />}>点击上传</Button>
            </Upload>
            {/* 图片 */}
            <img width="100px" alt="" src={this.state.thumb}/>
          </Form.Item>
          <Form.Item
            label="详情"
          >
            <div id="content"/>
          </Form.Item>
          <Form.Item {...tailLayout}>
            {/* 提交按钮 */}
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
        }
      </div>
    )
  };
  componentDidMount(){
    /* 请求文章列表 */
    this.fetchArt();
  };
  initEditor = () =>{
    // 初始化富文本
    const editor = new E('#content')
    /* 创建富文本 */
    editor.create();
    // 设置富文本初始值
    editor.txt.html(this.state.art.content);
    /* editor设置到state中 */
    this.setState({
      editor
    })
  };
  fetchArt = () => {
    // 模拟接口获取文章详情
    const { artId } = this.props.match.params;
    /* 传入参数id */
    fetchArtDetail({
      id: artId
    }).then(res=> {
      /* 服务端成功响应 */
      if(res.data.code === 200) {
        /* 设置state */
        this.setState({
          art: res.data.data,
          thumb: res.data.data.thumb
        }, () => {
          // 在这里初始化富文本
          this.initEditor()
        })
      }
    })
  };
  submitForm = (params) =>{
    // 提交
    params = {
      /* 将函数参数展开属性添加到新的params上 */
      ...params,
      thumb: this.state.thumb,
      content: this.state.editor.txt.html(),
      id: this.state.art.id
    }
    console.log(params);
    /* 更新文章的接口34 */
    updateArt(params).then(res=>{
      /* 服务器成功响应 */
      if(res.data.code === 200) {
        /* 成功时回调 */
        message.success(res.data.msg, 2, () => {
          // 回到列表页
          this.props.history.replace('/admin/artList')
        })
      }
    })
  }
}
